<template>
  <div
    class="container w-full h-full flex"
    v-if="currentQuestion && !currentQuestion.answerScoreable"
  >
    <div class="left h-full bg-white flex-1 p-20px box-border overflow-hidden">
      <div ref="scroll" class="w-full h-full overflow-scroll">
        <Stem :data="stem" />
        <!-- 答案和解析 -->
        <div class="mt-10">
          <div
            class="module-item flex text-333 font-medium mt-20px mb-12px"
            v-show="studentAnswerUrl"
          >
            <div class="rect mr-6px"></div>
            <div class="">作答过程</div>
          </div>
          <div style="font-size: 0" v-show="studentAnswerUrl">
            <el-image
              style="width: 0.8rem; height: auto"
              :src="studentAnswerUrl"
              :preview-src-list="[studentAnswerUrl]"
            />
          </div>
          <!-- answer -->
          <div class="module-item flex text-333 font-medium mt-20px mb-12px">
            <div class="rect mr-6px"></div>
            <div class="">答案</div>
          </div>
          <div
            class="answer p-20px bg-F4F7FB text-333"
            style="white-space: break-spaces; word-break: break-all"
            v-html="answerHtml"
          ></div>
          <!-- explanation -->
          <div class="module-item flex text-333 font-medium mt-20px mb-12px">
            <div class="rect mr-6px"></div>
            <div class="">解析</div>
          </div>
          <div
            class="explanation p-20px bg-F4F7FB text-333"
            style="white-space: break-spaces; word-break: break-all"
            v-html="explanationHtml"
          ></div>
        </div>
      </div>
    </div>
    <div
      class="right h-full bg-white p-20px box-border ml-20px flex flex-col"
      style="font-size: 0.14rem"
    >
      <div class="flex-1"></div>
      <div class="footer box-border">
        <div class="flex flex-col items-center">
          <CustomButton
            class="block mt-20px"
            style="width: 2rem"
            @click="prevQuestion"
            v-show="isShowPrevBtn"
            >上一题
          </CustomButton>

          <CustomButton
            class="block mt-20px"
            style="width: 2rem"
            @click="nextQuestion"
            v-show="isShowNextBtn"
            >下一题
          </CustomButton>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Stem from '@/components/question/stem/index'
import CustomButton from '@/components/button'
import { formatQuestionStem, formatQuestionAnswer } from '@/utils/question'

export default {
  components: {
    CustomButton,
    Stem
  },
  props: {
    questions: {
      type: Array,
      default: () => {
        return []
      }
    },
    questionIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {}
  },
  computed: {
    currentQuestionIndex() {
      return this.questionIndex
    },
    currentQuestion() {
      return this.questions[this.questionIndex]
    },
    stem() {
      const {
        stem: stemString,
        question: { stem },
        typeName
      } = this.currentQuestion.questionDto

      const { type = '未知题型' } = stem ? stem : {}

      return formatQuestionStem(stemString, {
        label: typeName,
        type
      })
    },
    answer() {
      const { answer } = this.currentQuestion.questionDto

      return answer.replace(/<p/g, '<p class="paragraph"')
    },
    answerHtml() {
      const { answer } = this.currentQuestion.questionDto

      return answer
    },
    studentAnswerUrl() {
      const { studentAnswerUrl } = this.currentQuestion

      return studentAnswerUrl ? studentAnswerUrl : ''
    },
    explanationHtml() {
      const { explanation } = this.currentQuestion.questionDto

      if (!explanation)
        return '<div class="qml-explanation"><p class="paragraph" style=""><span>无</span></p></div>'

      return explanation.replace(/<p/g, '<p class="paragraph"')
    },
    // 是否显示上一题按钮
    isShowPrevBtn() {
      return this.questionIndex != 0
    },
    // 是否显示下一题按钮
    isShowNextBtn() {
      return this.questionIndex < this.questions.length - 1
    }
  },
  watch: {
    questionIndex() {
      this.$refs.scroll && this.$refs.scroll.scrollTo(0, 0)
    }
  },
  methods: {
    prevQuestion() {
      this.$emit('prev')
    },
    nextQuestion() {
      this.$emit('next')
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  .left {
    border-radius: 16px;

    .module-item {
      font-size: 26px;
      line-height: 26px;

      .rect {
        width: 4px;
        height: 26px;
        background: linear-gradient(180deg, #51c3ff 0%, #31b3f7 100%);
        border-radius: 3px;
      }
    }

    .answer,
    .explanation {
      font-size: 26px;
      line-height: 26px;
      border-radius: 8px;
    }
  }

  .right {
    border-radius: 16px;
    width: 303px;

    .footer {
      height: auto;
    }

    .u-radio {
      font-size: 20px;
    }

    /deep/ .u-checkbox-label--left {
      span {
        font-size: 20px;
        color: #333;
      }

      .u-checkbox__icon-wrap--square span {
        color: #fff;
      }
    }
  }
}

/deep/ .el-radio {
  display: flex;
  align-items: center;

  .el-radio__input {
    display: flex;
    align-items: center;
  }

  .el-radio__inner {
    width: 22px;
    height: 22px;
  }

  .el-radio__label {
    font-size: 20px;
    color: #333;
  }
}

/deep/ .el-checkbox {
  display: flex;
  align-items: center;
}

/deep/ .el-checkbox__label {
  font-size: 20px;
  color: #333;
}

/deep/ .el-checkbox__inner {
  width: 19px;
  height: 19px;
}

/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #333;
}

/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #51c3ff !important;
  border-color: #51c3ff;
}

/deep/ .el-checkbox__inner::after {
  left: 40%;
  top: 20%;
}

/deep/ .el-checkbox__input {
  height: 19px;
}
</style>
